<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>

<div class="demoTable">
    搜索手机号：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>

<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 引入 layui.js 的 <script> 标签最好放置在 html 末尾 -->
<script src="/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    layui.use('table', function () {
            var table = layui.table;

            //方法级渲染
            table.render({
                elem: '#LAY_table_user'
                , url: '/customerAdmin/showCustomer' // 后端请求路径 返回json
                , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [
                    [
                        {checkbox: true, fixed: true}
                        , {field: 'id', title: 'ID', sort: true, fixed: true}
                        , {field: 'phone', title: '手机号'}
                        , {field: 'education', title: '学历'}
                        , {field: 'birthday', title: '生日'}
                        , {field: 'passengerName', title: '姓名'}
                        , {
                        field: 'registerTime',
                        title: '注册时间',
                        templet: "<div>{{layui.util.toDateString(d.registerTime, 'yyyy-MM-dd  HH:mm:ss')}}</div>\"}"
                    }
                        , {field: 'balance', title: '余额',}
                        , {field: 'gender', title: '性别',}
                        , {field: 'headImg', title: '头像', sort: true}
                        , {field: 'passengerType', title: '登录类型',}
                        , {field: 'userLevel', title: '用户等级'}
                        , {
                        field: 'registerType', title: '注册类型', sort: true, templet: function (data) {
                            return data.registerType === 0 ? "未知" : data.registerType === 1 ? "安卓" : "IOS"
                        }
                    }
                        , {field: 'lastLoginTime', title: '最后一次登录时间', sort: true,}
                        , {field: 'lastLoginMethod', title: '最后一次登录方式', sort: true,}
                        , {field: 'lastLoginScreenTime', title: '最后一次登录大屏时间', sort: true,}
                        , {field: 'lastLoginScreenMethod', title: '最后一次登录大屏方式', sort: true,}
                        , {field: 'lastOrderTime', title: '最近下单时间', sort: true,}
                        , {field: 'createTime', title: '创建时间',}
                        , {field: 'updateTime', title: '修改时间', sort: true,}
                        , {fixed: 'right', title: '操作', width: 178, align: 'center', toolbar: '#barDemo'}
                        // , {title: '操作', sort: true, width: 135 }
                    ]
                ]
                , id: 'testReload'
                , page: true
                , height: 610
                , parseData: function (res) { //res 即为原始返回的数据  responseData{ code :""  msg :"" , data:""}
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.data.total, //解析数据长度
                        "data": res.data.list //解析数据列表
                    };
                }
                , response: {
                    // statusName: 'status' //规定数据状态的字段名称，默认：code
                    statusCode: 200 //规定成功的状态码，默认：0
                    // ,msgName: 'hint' //规定状态信息的字段名称，默认：msg
                    // ,countName: 'total' //规定数据总数的字段名称，默认：count
                    // ,dataName: 'rows' //规定数据列表的字段名称，默认：data
                }
            });
//监听工具条
            table.on('tool(user)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    detail(data.id);
                } else if (obj.event === 'del') {
                    // 删除操作 ，弹出提示框
                    layer.confirm('真的删除此数据么', function (index) {
                        // layer.alert(JSON.stringify(data))
                        // obj.del();
                        // 使用后端删除 ajax ， 重新加载表格数据
                        $.ajax({
                            url: "/customerAdmin/deleteCustomer"
                            , data: {id: data.id}
                            , dataType: 'json'
                            , success: function (data) {
                                layer.msg(data.msg)
                            }
                        })
                        layer.close(index);
                        table.reload('testReload');
                    });
                } else if (obj.event === 'edit') {
                    edit(data.id);
                    // layer.alert('编辑行：<br>'+ JSON.stringify(data))
                }
            });
            function detail(id) {
                //定义全局变量
                customerShowId = id;
                layer.open({
                    type: 2 //此处以iframe举例
                    ,title: '修改'
                    ,area: ['800px', '360px']
                    ,shade: 0
                    ,maxmin: true
                    ,content: "/customerAdmin/customerShow"
                });
            }
            function edit(id) {
                // 全局变量
                var that = this;

                customerId = id ;
                //多窗口模式，层叠置顶
                layer.open({
                    type: 2 //此处以iframe举例
                    , title: '修改'
                    , area: ['800px', '360px']
                    , shade: 0
                    , maxmin: true
                    , content: '/customerAdmin/customerUpdate'
                    , btn: ['修改', '关闭'],//只是为了演示
                    // , yes: function () {
                    // $(that).click();

                    // $.ajax({
                    //     url: "/customerAdmin/customerUpdateByID" + "?id=" + id
                    //     , success: function (data) {
                    //         if (data != null) {
                    //             console.log(this.url)
                    //             $.ajax({
                    //                 url: "/customerAdmin/customerUpdate",
                    //                 data: id,
                    //                 success: function () {
                    //                     window.location.href = this.url + "?id=" + id;
                    //                 }
                    //
                    //             })
                    //         }
                    //
                    //     }
                    // })
                    //
                    // }
                    // , btn2: function () {
                    //     layer.close();
                    // }
                });
            }


            var $ = layui.$, active = {
                reload: function () {
                    var demoReload = $('#demoReload');

                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                            "phoneNumber": demoReload.val()
                        }
                    });
                }
            };

            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        }
    )
    ;
</script>
</body>
</html>